<template>
  <div>首页</div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '深圳', pid: '' },
        { id: 2, name: '宝安', pid: 1 },
        { id: 3, name: '石岩', pid: 2 },
        { id: 4, name: '南山', pid: 1 }
      ]
    }
  },
  created() {
    // 找出了深圳
    console.log(this.changeData(this.list, ''))
  },
  methods: {
    changeData(arr, pid) {
      //  1:只找出第一层数据
      //  2:将方法的pid写成形参
      //  3:给找出来的数据加一个children字段 children:[]
      //  4:通过递归调用找出子集 重点，参数pid是父级的id
      //   先会写再说：会用四次
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style></style>
